<template>
  <z-modal
    :width="600"
    v-bind="modalOption"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
        <a-row>
          <a-col :span="24" >
            <a-form-model-item label="列名称" prop="columnName">
              <a-input placeholder="请输入连接名称" :disabled="disableSubmit" v-model.trim="form.columnName"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >
            <a-form-model-item label="类型" prop="columnType">
              <z-dict-select-tag v-model="form.columnType" :disabled="disableSubmit" :options="typesOptions"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >
            <a-form-model-item label="长度">
              <a-input-number class="!w-full" placeholder="请输入长度" :disabled="disableSubmit" v-model.trim="form.columnSize"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >
            <a-form-model-item label="是否主键">
              <a-checkbox :disabled="disableSubmit" v-model="form.isprimaryKey" ></a-checkbox>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >
            <a-form-model-item label="是否可为空" >
              <a-checkbox :disabled="disableSubmit" v-model="form.isnullAble" ></a-checkbox>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </z-modal>
</template>

<script>
import ModalFormMixin from '@/mixins/ModalFormMixin'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
import { getAction } from '@/services/manage'
export default {
  name: 'ColumnModal',
  mixins: [ModalFormMixin],
  components: {
    ZDictSelectTag
  },
  props: {
    table: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      validatorRules: {
        columnName: [{ required: true, message: '请输入列名称' }],
        columnType: [{ required: true, message: '请选择列类型' }]
      },
      url: {
        add: '/dbconsole/column/add/',
        edit: '/dbconsole/column/edit/',
        types: '/dbconsole/column/type/'
      },
      typesOptions: [{ label: '111', value: '2222' }]
    }
  },
  methods: {
    addAfter() {
      const { data } = this.table
      this.url.add = '/dbconsole/column/add/' + data.dbInfoId + '/' + data.tableName
      this.url.types = '/dbconsole/column/type/' + data.dbInfoId
      this.$set(this.form, 'isnullAble', true)
      this.getTypes()
    },
    editAfter() {
      const { data } = this.table
      this.url.edit = '/dbconsole/column/edit/' + data.dbInfoId + '/' + data.tableName
      this.url.types = '/dbconsole/column/type/' + data.dbInfoId
      this.getTypes()
    },
    classifyIntoFormData() {
      return { ...this.form }
    },
    getTypes() {
      getAction(this.url.types).then(res => {
        if (res.success) {
          this.typesOptions = []
          res.result.forEach(item => {
            this.typesOptions.push({
              label: item.columnType,
              value: item.columnType
            })
          })
        }
      })
    }
  }
}
</script>

